<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <el-form :inline="true" :model="courseSearch" class="demo-form-inline">
          <el-form-item label="课程名称">
            <el-input
              v-model="courseSearch.courseName"
              placeholder="课程名称"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="状态">
             <el-select
              v-model="courseSearch.status"
              placeholder="请选择"
              clearable>
              <el-option
                v-for="item in courseStatus"
                :key="item.id"
                :label="item.label"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              @click="onCourseSearch"
              :disabled="isLoading"
            >查询</el-button>
          </el-form-item>
          <el-button
            style="float:right;margin-right:20px"
            type="primary"
            @click="$router.push({name: 'createCourse'})"
          >新增课程</el-button>
        </el-form>
      </div>
      <el-table
        v-loading="isLoading"
        :data="courses"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="ID"
          width="180">
        </el-table-column>
        <el-table-column
          prop="courseName"
          label="课程名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格"
          width="180">
        </el-table-column>
        <el-table-column
          prop="discounts"
          label="排序"
          width="180">
        </el-table-column>
        <el-table-column
          label="状态"
          prop="status">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :disabled="scope.row.isStatusLoading"
              @change="onChangeStatus(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
            >下架</el-button>
            <el-button
              size="mini"
              @click="$router.push({
                name: 'editCourse',
                params: {
                  courseId: scope.row.id
                }
              })"
            >编辑</el-button>
            <el-button
              size="mini"
              @click="$router.push({
                name: 'courseSection',
                params: {
                  courseId: scope.row.id,
                },
                query: {
                  courseName: scope.row.courseName
                }
              })"
            >内容管理</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="courseSearch.currentPage"
        :page-sizes="[10, 15, 20]"
        :page-size="courseSearch.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :disabled="isLoading"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getQueryCourses, changeState } from '@/services/course'
export default {
  data () {
    return {
      courseSearch: {
        currentPage: 1,
        pageSize: 10,
        courseName: '',
        status: ''
      },
      courses: [],
      options: [],
      // 课程状态
      courseStatus: [
        { id: '0', label: '下架' },
        { id: '1', label: '上架' },
        { id: '', label: '全部' }
      ],
      isLoading: false,
      total: 0
    }
  },
  created () {
    this.loadCoursesList()
  },
  methods: {
    async loadCoursesList () {
      this.isLoading = true
      const { data } = await getQueryCourses(this.courseSearch)
      if (data.code === '000000') {
        // 用于表示更改的状态
        data.data.records.forEach(item => {
          item.isStatusLoading = false
        })
        this.isLoading = false
        this.courses = data.data.records
        this.total = data.data.total
      }
    },
    onSubmit () {},
    handleCurrentChange (value) {
      this.courseSearch.currentPage = value
      this.loadCoursesList()
    },
    handleSizeChange (value) {
      this.courseSearch.pageSize = value
      this.loadCoursesList()
    },
    // 课程搜索
    onCourseSearch () {
      this.courseSearch.currentPage = 1
      this.loadCoursesList()
    },
    // 课程上下架
    async onChangeStatus (course) {
      // 开启禁用状态
      course.isStatusLoading = true
      const { data } = await changeState({
        courseId: course.id,
        status: course.status
      })
      if (data.code === '000000') {
        this.$message.success(`${course.status === 1 ? '上架' : '下架'} 成功！`)
        course.isStatusLoading = false
      }
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
